<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>珠峰培训-QQ音乐播放器</title>
    <!-- IMPORT CSS -->
    <link rel="stylesheet" href="./css/reset.min.css">
    <link rel="stylesheet" href="./css/zzz.css">
    <script src="./js/prefixfree.min.js" async></script>
    <!-- //有依赖加dfer,没依赖加async -->

<script>
    (function (){
        const computed = ()=>{
            let winW=document.documentElement.clientWidth,
            ratio = 100;
            if (winW>=750) {
                document.documentElement.style.fontSize='100px';
                return;
            }
            ratio = winW/(750/100);
            
            document.documentElement.style.fontSize = ratio + 'px';
        };
        computed();
        //横竖屏切换事件orientationchange
        let event = window.hasOwnProperty('orientationchange')?'orientationchange':'resize';
        window.addEventListener(event,computed);
    })()
</script>

    
</head>

<body>

    <section id="app">
        <!-- 头部 -->
        <header class="header-box">
            <div class="base-info">
                <img src="./images/G.E.M.webp" alt="" class="pic">
                <h2 class="title">《多远都要在一起》</h2>
                <h3 class="author">邓紫棋</h3>
            </div>
            <a href="javascript:;"  class="music-btn"></a>
        </header>


        <main class="main-box">
            <div class="lyric">
                <div class="wrapper">
                    <p class="active">多远都要在一起</p>
                    <p>词/曲：邓紫棋</p>
                </div>
            </div>
        </main>


        <footer class="footer-box">
            <div class="progress">
                <span class="already">00:00</span>
                <div class="back">
                    <div class="rate"></div>
                </div>
                <span class="duration">00:00</span>

            </div>
            <a href="" class="download">下载音乐</a>

        </footer>

        <!-- 背景遮罩层 -->

        <div class="bg-image"></div>
        <div class="bg-mark"></div>


        <!-- 音频 -->
        <audio src="./images/daoxiang.m4a" id="myAudio" preload="metadata"></audio>
    </section>
    <!-- IMPORT JS -->
    <script src="js/fastclick.js" defer></script>
    <!-- 发布订阅模式 -->
    <!-- 有依赖加defer -->
    <script src="js/subscribe.js" defer></script>
    <script src="js/index.js" defer></script>
</body>

</html>